<template>
	<view class="orderItem order-list">
		<view class="" v-if="list.length > 0">
			<view class="bg-white list-item margin-bottom-sm grid col-1"  v-for="(item,index) in list" :key="index" @click="clickDetail(item)">
				<view class="padding-sm cinema flex justify-between align-center">
					<view :class="[item.status==4 || item.status==5 ? 'fl text-6d6d6d text-lg' : 'fl text-black text-lg']">{{item.cn}}</view>
					<u-count-down :timestamp="item.m0" v-if="item.status==0 && item.is_pay==0" :show-hours="false" color="#f1255d" separator-color="#f1255d" @end="timeOutEnd(item, index)"></u-count-down>
					<!-- {{this.getMinAndSec(item.created_at,1)}} -->
					<!-- <uni-countdown bind:__l="__l" bind:timeup="__e" color="#F1255D" data-event-opts="{{[ [ '^timeup',[ ['timeup'] ] ] ]}}"
					 minute="{{item.m0}}" second="{{item.m1}}" showColon="{{true}}" showDay="{{false}}" showHour="{{false}}"
					 splitorColor="#F1255D" vueId="{{'065b1d4f-3-'+index+','+'065b1d4f-2'}}" v-if="item.status==0&&item.is_pay==0"></uni-countdown> -->
					<view :class="[item.status==4 || item.status==5 ? 'text-6d6d6d text-price':'fr text-red-new text-price']"
					 v-else>{{item.price * 1000 * item.count / 1000}}</view>
				</view>
				<view class="flex align-center padding-sm info">
					<view class="left-icon">
						<!-- <text :class="[item.status==4 || item.status==5 ? 'iconfont icon-round_ticket_fill text-sl text-gray' : 'iconfont icon-round_ticket_fill text-red-new text-sl']"></text> -->
						<image v-if="item.status==4 || item.status==5 " class="ima" src="../../../subpages/static/gray.png" mode=""></image>
						<image v-else class="ima" src="../../../subpages/static/light.png" mode=""></image>
					</view>
					<view class="flex-treble">
						<view :class="[item.status==4 || item.status==5 ? 'text-6d6d6d' : 'text-black']">{{item.mn}}
							<view class="cu-tag line-gray sm radius margin-left-xs">{{item.count + '张'}}</view>
						</view>
						<view :class="[item.status==4 || item.status==5 ? 'text-gray margin-top-xs' : 'text-black margin-top-xs']">
						<text>{{item.show_time | getWeekByDay}} {{item.show_time | formateDate('MM月DD日 HH:mm')}}</text>
						</view>
					</view>
					<view class="flex-sub text-center">
						<text class="text-red-new text-lg" v-if="item.status == 0 && item.is_pay==0">去支付</text>
			
							<!-- 测完就删  start -->
						<text class="text-red-new text-lg" v-if="item.status == 0 && item.is_pay == 1">出票中</text>
							<!-- 测完就删  end -->
						
						<text class="text-red-new text-lg" v-if="(item.status == 2 || item.status == 1) && item.is_pay == 1">出票中</text>
						
						<text class="text-red-new text-lg" v-if="item.status==3 && item.is_pay == 1">已出票</text>
						<text class="text-xsl" v-if="item.status == 4 && item.is_pay == 1">已完成</text>
						<text class="text-xsl" v-if="item.status == 5 && item.is_pay == 1">已退款</text>
					</view>
				</view>
			</view>
		</view>
		<!-- 无订单状态 start-->
		<view class="" v-if="list.length <= 0">
			<image src="@/static/img/other/no-img.png" mode="" class="cinimage"></image>
			<view class="orderfont">
				暂无订单，快去购票吧~
			</view>
		</view>
		<!-- 无订单状态 end-->
	</view>
</template>

<script>
	export default {
		data() {
			return {

			}
		},
		props: {
			list: {
				type: Array,
				default: () => []
			},
		},
		methods:{
			timeOutEnd(row, index){
				this.$api.releaseOrder({oid:row.id})
				this.list.splice(index, 1)
			},
			clickDetail(item){
				if(item.status == 0 && item.is_pay == 0 ){
					uni.navigateTo({
						url: `/subpages/seat/submit?oid=${item.id}&pay=1`
					})
				}else{
					uni.navigateTo({
						url: `/subpages/orderDetail/order-detail?no=${item.orderno}`
					})
				}
				
				
			}
			
		}
	}
</script>

<style lang="scss" scoped>
	.orderItem {
		.ima{
			width: 65rpx;
			height: 65rpx;
			border-radius: 50%;
		}
		.bg-white {
		    background-color: #fff;
		    color: #666;
		}
		.margin-bottom-sm {
		    margin-bottom: 20rpx;
		}
		.grid {
		    display: flex;
		    flex-wrap: wrap;
		}
		.padding-sm {
		    padding: 20rpx;
		}
		
		.grid.col-1>view {
		    width: 100%;
		}
		.justify-between {
		    -webkit-box-pack: justify;
		    justify-content: space-between;
		}
		.align-center {
		    -webkit-box-align: center;
		    align-items: center;
		}
		.flex {
		    display: flex;
		}
		.line-black, .lines-black, .text-black {
		    color: #333;
		}
		
		.text-lg {
		    font-size: 32rpx;
		}
		.fl {
		    float: left;
		}
		.line-red-new, .text-red-new {
		    color: #f1255d;
		}
		.fr {
		    float: right;
		}
		.text-price:before {
		    content: "¥";
		    font-size: 80%;
		    margin-right: 4rpx;
		}
		.solid-bottom:after {
		    border-bottom: 1rpx solid rgba(0,0,0,.1);
		}
		.dashed-bottom:after, .dashed-left:after, .dashed-right:after, .dashed-top:after, .dashed:after, .solid-bottom:after, .solid-left:after, .solid-right:after, .solid-top:after, .solid:after, .solids-bottom:after, .solids-left:after, .solids-right:after, .solids-top:after, .solids:after {
		    content: " ";
		    width: 200%;
		    height: 200%;
		    position: absolute;
		    top: 0;
		    left: 0;
		    border-radius: inherit;
		    transform: scale(.5);
		    transform-origin: 0 0;
		    pointer-events: none;
		    box-sizing: border-box;
		}
		.order-list .list-item .info {
		    height: 150rpx;
		}
		.padding-sm {
		    padding: 20rpx;
		}
		.grid.col-1>view {
		    width: 100%;
		}
		.align-center {
		    -webkit-box-align: center;
		    align-items: center;
		}
		.order-list .list-item .info .left-icon {
		    width: 100rpx;
		}
		.text-sl {
		    font-size: 80rpx;
		}
		.flex-treble {
		    -webkit-box-flex: 3;
		    flex: 3;
		}
		.line-black, .lines-black, .text-black {
		    color: #333;
		}
		.line-black, .lines-black, .text-black {
		    color: #333;
		}
		.margin-top-xs {
		    margin-top: 10rpx;
		}
		.line-gray, .lines-gray, .text-gray {
		    color: #aaa;
		}
		.margin-left-xs {
		    margin-left: 10rpx;
		}
		.cu-tag.sm {
		    font-size: 20rpx;
		    padding: 0rpx 12rpx;
		    height: 32rpx;
		}
		.cu-tag {
		    font-size: 24rpx;
		    vertical-align: middle;
		    position: relative;
		    display: -webkit-inline-box;
		    display: -webkit-inline-flex;
		    display: inline-flex;
		    -webkit-box-align: center;
		    align-items: center;
		    -webkit-box-pack: center;
		    justify-content: center;
		    box-sizing: border-box;
		    padding: 0rpx 16rpx;
		    height: 48rpx;
		    font-family: Helvetica Neue,Helvetica,sans-serif;
		    white-space: nowrap;
		}
		.radius {
		    border-radius: 6rpx;
		}
		.cu-tag[class*=line-]:after {
		    content: " ";
		    width: 200%;
		    height: 200%;
		    position: absolute;
		    top: 0;
		    left: 0;
		    border: 1rpx solid;
		    transform: scale(.5);
		    transform-origin: 0 0;
		    box-sizing: border-box;
		    border-radius: inherit;
		    z-index: 1;
		    pointer-events: none;
		}
		.text-center {
		    text-align: center;
		}
		.flex-sub {
		    -webkit-box-flex: 1;
		    // flex: 1;
		}
		.text-xsl {
		    font-size: 32rpx;
			color: #666666;
		}
		.list-item {
			.info {
			    height: 150rpx;
				.left-icon {
				    width: 100rpx;
					
				}
			}
		}
		
		.cinimage {
			margin-top: 150rpx;
			width: 750rpx;
			height: 304rpx;
		}
		
		.orderfont {
			color: #666;
			margin-top: 40rpx;
			font-size: 32rpx;
			text-align: center;
		}
	}
</style>
